import 'package:flutter/material.dart';
import 'package:flutter_saixiaoli/pages/home/selected/swiperIndicator.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class SelectedDetail extends StatefulWidget {
  @override
  State<SelectedDetail> createState() => _SelectedDetailState();
}

class _SelectedDetailState extends State<SelectedDetail> {
  //评论数据
  List commentData = [
    {'image': '', 'nackname': '清风徐来', 'timer': '20小时前', 'content': '666'},
    {'image': '', 'nackname': '清风徐来2', 'timer': '20小时前', 'content': '6662'},
    {'image': '', 'nackname': '清风徐来3', 'timer': '20小时前', 'content': '6661'},
  ];
  //评论widget
  commentWidget() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          child: Text(
            '评论列表（3）',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          padding: EdgeInsets.all(15),
          decoration: BoxDecoration(
              border: Border(
                  bottom: BorderSide(
                      color: Color.fromRGBO(238, 238, 238, 1), width: 0.5))),
        ),
        Column(
          children: commentData
              .map((item) => Container(
                    padding: EdgeInsets.only(
                        bottom: 14, left: 10, right: 10, top: 10),
                    decoration: BoxDecoration(
                        border: Border(
                            bottom: BorderSide(
                                color: Color.fromRGBO(238, 238, 238, 1),
                                width: 0.5))),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: 40,
                          height: 40,
                          margin: EdgeInsets.only(right: 10),
                          decoration: BoxDecoration(
                              color: Colors.grey,
                              borderRadius: BorderRadius.circular(20)),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                              child: Text('${item['nackname']}'),
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 10, bottom: 15),
                              child: Text(
                                '${item['timer']}',
                                style: TextStyle(
                                    fontSize: 11,
                                    color: Color.fromRGBO(193, 193, 193, 1)),
                              ),
                            ),
                            Wrap(
                              children: [Text('${item['content']}')],
                            )
                          ],
                        )
                      ],
                    ),
                  ))
              .toList(),
        ),
      ],
    );
  }

//底部widget
  fotterWidget() {
    return Container(
      padding: EdgeInsets.all(10),
      height: 60,
      decoration: BoxDecoration(boxShadow: [
        BoxShadow(
            color: Color.fromRGBO(187, 187, 187, 0.4),
            offset: Offset(0.0, 5.0), //阴影xy轴偏移量
            blurRadius: 15.0, //阴影模糊程度
            spreadRadius: 1.0)
      ], color: Colors.white),
      child: Row(
        children: [
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              height: 33,
              decoration: BoxDecoration(
                  color: Color.fromRGBO(249, 249, 249, 1),
                  borderRadius: BorderRadius.circular(15)),
              child: TextField(
                decoration: InputDecoration(
                    border: InputBorder.none,
                    hintText: '请输入你要评论的内容',
                    hintStyle: TextStyle(fontSize: 13),
                    isDense: true),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 10),
            width: 70,
            height: 33,
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(15)),
            child: SizedBox(
              width: 70,
              height: 33,
              child: ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20))),
                    backgroundColor: MaterialStateProperty.all(
                        Color.fromRGBO(191, 55, 54, 1))),

                // style: ElevatedButton.styleFrom(
                //     primary: Color.fromRGBO(191, 55, 54, 1)),
                child: Text(
                  '发送',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    List swiperList = [
      Container(
        width: MediaQuery.of(context).size.width,
        color: Colors.red,
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        color: Colors.yellow,
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        color: Colors.green,
      ),
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text('精选游记'),
        elevation: 0,
      ),
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    height: 180,
                    child: Swiper(
                      itemCount: swiperList.length,
                      itemBuilder: (context, index) {
                        return Container(
                          child: swiperList[index],
                        );
                      },
                      pagination: SwiperPagination(
                        alignment: Alignment.bottomRight,
                        builder:
                            SwiperCustomPagination(builder: (context, config) {
                          return SwiperIndicator.indicator(
                              current: config.activeIndex + 1,
                              length: swiperList.length);
                        }),
                      ),
                    ),
                  ),
                  Container(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          child: Text(
                            '秋色醉人时，十一月游记等你来投稿！',
                            style: TextStyle(
                                fontSize: 15, fontWeight: FontWeight.bold),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 8),
                          child: Row(
                            children: [
                              Container(
                                margin: EdgeInsets.only(right: 5),
                                width: 60,
                                height: 30,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color: Color.fromRGBO(255, 243, 234, 1),
                                    borderRadius: BorderRadius.circular(5)),
                                child: Text(
                                  '户外指南',
                                  style: TextStyle(
                                      fontSize: 11,
                                      color: Color.fromRGBO(255, 136, 49, 1)),
                                ),
                              ),
                              Container(
                                margin: EdgeInsets.only(right: 5),
                                width: 60,
                                height: 30,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color: Color.fromRGBO(255, 243, 234, 1),
                                    borderRadius: BorderRadius.circular(5)),
                                child: Text(
                                  '旅游攻略',
                                  style: TextStyle(
                                      fontSize: 11,
                                      color: Color.fromRGBO(255, 136, 49, 1)),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 16),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Container(
                                    child: Text(
                                      '2020-11-06',
                                      style: TextStyle(
                                          fontSize: 13,
                                          color:
                                              Color.fromRGBO(102, 102, 102, 1),
                                          height: 1),
                                    ),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(left: 10),
                                    child: Text(
                                      '爱拼才会赢',
                                      style: TextStyle(
                                          fontSize: 13,
                                          color:
                                              Color.fromRGBO(67, 112, 246, 1),
                                          height: 1),
                                    ),
                                  )
                                ],
                              ),
                              Container(
                                child: Text(
                                  '浏览 398',
                                  style: TextStyle(
                                      color: Color.fromRGBO(102, 102, 102, 1),
                                      fontSize: 12,
                                      height: 1),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 20, bottom: 15),
                          child: Text(
                            '郁达夫曾说：“秋天，无论在什么地方的秋天，总是好的”。',
                            style: TextStyle(
                                fontSize: 13, fontWeight: FontWeight.bold),
                          ),
                        ),
                        Wrap(
                          children: [
                            Text(
                                '秋高气爽，风轻云淡，正是户外活动，观赏美景的好时候。 此 时，气候的适宜，户外景色的变换，很多人都想去户外一览山河 秋色。面对')
                          ],
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 15),
                          padding: EdgeInsets.all(10),
                          height: 110,
                          decoration: BoxDecoration(
                              color: Color.fromRGBO(249, 249, 249, 1),
                              borderRadius: BorderRadius.circular(10)),
                          child: Row(
                            children: [
                              Container(
                                width: 90,
                                height: 90,
                                color: Colors.grey,
                                margin: EdgeInsets.only(right: 15),
                              ),
                              Expanded(
                                child: Column(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Container(
                                          child: Text('超级无敌好用头戴夜行矿灯'),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(top: 10),
                                          width: 60,
                                          alignment: Alignment.center,
                                          decoration: BoxDecoration(
                                              color: Color.fromRGBO(
                                                  246, 238, 238, 1),
                                              borderRadius:
                                                  BorderRadius.circular(5)),
                                          child: Row(
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: [
                                              Container(
                                                child: Text(
                                                  '￥',
                                                  style: TextStyle(
                                                      color: Color.fromRGBO(
                                                          191, 55, 54, 1),
                                                      fontSize: 11),
                                                ),
                                              ),
                                              Container(
                                                child: Text(
                                                  '999',
                                                  style: TextStyle(
                                                      color: Color.fromRGBO(
                                                          191, 55, 54, 1),
                                                      fontSize: 15),
                                                ),
                                              )
                                            ],
                                          ),
                                        ),
                                      ],
                                    ),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Container(
                                          child: Text(
                                            '原价：¥ 1890.00 ',
                                            style: TextStyle(
                                                color: Color.fromRGBO(
                                                    102, 102, 102, 1),
                                                fontSize: 11,
                                                decoration:
                                                    TextDecoration.lineThrough,
                                                decorationColor: Color.fromRGBO(
                                                    102, 102, 102, 1)),
                                          ),
                                        ),
                                        SizedBox(
                                          height: 22,
                                          child: ElevatedButton(
                                            style: ElevatedButton.styleFrom(
                                                primary: Color.fromRGBO(
                                                    191, 55, 54, 1)),
                                            onPressed: () {},
                                            child: Text(
                                              '立即购买',
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 12,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    )
                                  ],
                                ),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                    padding: EdgeInsets.all(10),
                  ),
                  Container(
                    height: 8,
                    color: Color.fromRGBO(249, 249, 249, 1),
                  ),
                  //评论
                  commentWidget(),
                ],
              ),
            ),
          ),
          fotterWidget()
        ],
      ),
    );
  }
}
